<template>
  <router-view />
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="comment-o" replace to="/home"
        :badge="db.unReadCount === 0 ? '' : db.unReadCount">会话列表</van-tabbar-item>
      <van-tabbar-item icon="friends-o" replace to="/addressBook"
        :badge="addressBook.addressBookUnReadCount === 0 ? '' : addressBook.addressBookUnReadCount">通讯录</van-tabbar-item>
      <van-tabbar-item icon="setting-o" replace to="/me">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import indexedDBStore from "@/store/module/indexedDB";
import addressBookStore from '@/store/module/addressBook'

let addressBook = addressBookStore();
let db = indexedDBStore();
onMounted(() => {
  if (localStorage.getItem("unReadCount")) {
    db.unReadCount = Number(localStorage.getItem("unReadCount"));
  }
});
const active = ref(0);
const router = useRouter();
const nowRoute = router.currentRoute.value.path;
const tabbarList = [
  { index: 0, path: "/home" },
  { index: 1, path: "/addressBook" },
  { index: 2, path: "/me" },
];
tabbarList.forEach((item) => {
  if (item.path === nowRoute) {
    active.value = item.index;
  }
});
</script>

<style scoped lang="scss"></style>
